<template>
  <div class="box">
        <div class="box-a">
            <p class="a-p1">可用积分</p>
            <p class="a-p2">3680</p>
        </div>
        <!-- 间隔一 -->
        <span class="box-span1">2019年9月</span>
        <!-- 第二部分 -->
        <div class="box-b">
            <div class="b1" v-for="(integration ,index) in integrationList" :key="index">
                <div class="b1a">
                    <span class="b1-span1">{{integration.change_type == 0 ? '外卖下单' : integration.change_type==2 ? '食堂下单' :integration.change_type == 3 ?'管理员修改' :'积分兑换' }}</span>
                    <span class="b1-span2">{{integration.create_time}}</span>
                </div>
                <span class="b1-span3">{{integration.source_type==2?'-':'+'}}{{integration.change_count}}</span>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
        integrationList:[]
      }
    },

  methods: {
   
  },
 onLoad:function(options){
        wx.request({
        url: 'http://localhost:7777/userm/getIntegrationByMemberId?memberId='+options.memberId, //开发者服务器接口地址",
        method: 'GET',
        dataType: 'json', //如果设为json，会尝试对返回的数据做一次 JSON.parse
        success: res => {
            console.log(res.data[0]);
            this.integrationList=res.data;
        },
        fail: () => {},
        complete: () => {}
        });
 },
  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
        .box {
            width: 375px;
            height: 667px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            background: rgba(225, 225, 225, 1);
        }

        /* 第一区块 */
        .box-a {
            width: 375px;
            height: 190px;
            background: rgb(70, 150, 106);
            padding-left: 22px;
            box-sizing: border-box;
        }

        .a-p1 {
            margin-top: 83px;
            width: 70px;
            height: 14px;
            font-size: 16px;
            font-weight: 400;
            color: rgba(253, 253, 254, 1);
            line-height: 19px;
            opacity: 0.8;
        }

        .a-p2 {
            margin-top: 27px;
            width: 100px;
            height: 35px;
            font-size: 45px;
            font-weight: 500;
            color: rgba(253, 253, 254, 1);
            line-height: 49px;
        }

        /* 第一隔间 */
        .box-span1 {
            margin-left: 13px;
            width: 70px;
            height: 34px;
            line-height: 34px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(133, 132, 132, 1);
        }

        /* 第二,三区块 */
        .box-b,
        .box-c {
            width: 100%;
            height: 261px;
            display: flex;
            flex-direction: column;
            background: rgba(255, 255, 255, 1);
        }

        .box-c {
            height: 147px;
        }

        .b1,
        .b2,
        .b3,
        .b4,
        .c1,
        .c2 {
            width: 100%;
            height: 68px;
            display: flex;
            justify-content: space-between;
            padding-left: 12px;
            padding-right: 20px;
            box-sizing: border-box;

        }

        .c1 {
            height: 68px;
        }

        .c2 {
            height: 79px;
        }

        /* 左 */
        .b1a,
        .b2a,
        .b3a,
        .b4a,
        .c1a,
        .c2a {
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            border-bottom: 0.5px solid rgba(225, 225, 225, 1);
        }

        .b1-span1,
        .b2-span1,
        .b3-span1,
        .b4-span1,
        .c1-span1,
        .c2-span1 {
            margin-top: 15px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(53, 52, 52, 1);
        }

        .b1-span2,
        .b2-span2,
        .b3-span2,
        .b4-span2,
        .c1-span2,
        .c2-span2 {
            margin-top: 5px;
            font-size: 12px;
            font-weight: 400;
            color: rgba(163, 165, 168, 1);
        }

        .b1-span3,
        .b2-span3,
        .b3-span3,
        .b4-span3,
        .c1-span3,
        .c2-span3 {
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: flex-end;
            padding-top: 30px;
            box-sizing: border-box;
            font-size: 17px;
            font-weight: 400;
            color: rgba(53, 52, 52, 1);
            border-bottom: 0.5px solid rgba(225, 225, 225, 1);
        }

        .b1-span3,
        .c1-span3 {
            color: rgba(239, 103, 93, 1);
        }

        .box-span2 {
            margin-left: 13px;
            height: 34px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(133, 132, 132, 1);
            line-height: 34px;
        }
    </style>
